<template>
  <span>
    <el-tooltip class="item" effect="dark" :content="title" :disabled="disabled" :placement="direction">
      <div slot="content">
        <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="title" v-clipboard:success="clipboardSuccess" style="float:right">复制</el-link>
        <br/>
        <span> {{ title }}</span>
      </div>
       <span> {{ handleTitle() }}</span>
    </el-tooltip>
  </span>
</template>
<script>
  export default {
    name: 'ToolTip',
    props: {
      title: {
        type: String,
        required: false
      },
      max: {
        type: Number,
        required: false,
        default: 10
      },
      direction: {
        type: String,
        required: false,
        default: 'top'
      }
    },
    data() {
      return {
        disabled: false
      }
    },
    methods: {
      handleTitle() {
        if (this.title.length > this.max) {
          return this.title.slice(0, this.max) + '...'
        } else {
          this.disabled = true //不超出是不显示
          return this.title
        }
      },
      clipboardSuccess(){
        this.msgSuccess("复制成功");
      },
    }
  }
</script>
